<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内蒙古地区</title>
    <script src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="./css/1.css">
    <style>
        body {
          background-image: url('path/to/your/image.jpg');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
        }
        .p1 .slide{
          width: 100%;
          height: 450px;
        }
        .slide>img{
          width: 100%;
          height: 450px;
        }
      </style>
</head>
<body style="background-image: url('./img/背景1.jpg');">
    <div class="p1">
      <div class="slide">
        <img src="./img/nmglb1.jpg" alt="">
      </div>
    </div>
   <div id="zhu"></div>
   <div id="zhe"></div>
   <div id="bing"></div>



   <script>
     //柱状图工业
 var myChart = echarts.init(document.getElementById('zhu'))
 option = {
  title:{
         text: '内蒙古规模以上工业利润',
         textStyle: {
             fontSize: 16 // 设置标题字体大小
             }
     },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      data: ['2019', '2020', '2021', '2022', '2023'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '利润总额(亿元)',
    },
    {
      type: 'value',
      name: '企业单位数',
      axisLabel: {
        formatter: '{value} 个'
      }
    }
  ],
  series: [
    {
      name: '利润总额',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 亿元';
        }
      },
      data: [1332.8, 1431.7, 1293.17, 3860, 3926.9]
    },
    {
      name: '企业单位数',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 个';
        }
      },
      data: [2863, 2879, 2970, 2997, 2998]
    }
  ]
};
myChart.setOption(option);

//折线农业
var myChart = echarts.init(document.getElementById('zhe'))
setTimeout(function () {
  option = {
    title:{
         text: '内蒙古农作物产量',
         textStyle: {
             fontSize: 16 // 设置标题字体大小
             }
     },
    legend: {},
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      source: [
        ['product', '2018', '2019', '2020', '2021', '2022', '2023'],
        ['小麦', 202.3, 182.7, 172.8, 172.3, 171.4, 167.98],
        ['玉米', 2700, 2722.3, 2742.7, 2894.25, 3098.36, 3127.14],
        ['莜麦', 13.41, 13.87, 14.12, 14.65, 14.53, 15.21],
        ['高粱', 20, 37.9, 42.9, 49.7, 72.26, 79.65],
        ['大豆', 179.4, 226, 234.7, 237.3, 242.1, 245.8],
      ]
    },
    xAxis: { type: 'category' },
    yAxis: [
    {
      type: 'value',
      name: '产量（万吨）',
    },
    ],
    grid: { top: '55%' },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@2012} ({d}%)'
        },
        encode: {
          itemName: 'product',
          value: '2012',
          tooltip: '2012'
        }
      }
    ]
  };
  myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
  myChart.setOption(option);
});

//扇形
var bingChart = echarts.init(document.getElementById('bing'));
var bingOption = {
  title:{
         text: '内蒙古各地区种植面积(平方万千米)',
         textStyle: {
             fontSize: 20 // 设置标题字体大小
             },
     },
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
       label: {
        show: true,
        formatter: '{b}: {c}' // 显示名称和值
      },
      data: [
        { value: 27, name: '阿拉善盟' },
        { value: 25.3, name: '呼伦贝尔市' },
        { value: 20.3, name: '锡林郭勒市' },
        { value: 9, name: '赤峰市' },
        { value: 8.7, name: '鄂尔多斯市' },
        { value: 6.5, name: '巴彦淖尔市' },
        { value: 5.9, name: '通辽市' },
        { value: 5.51, name: '兴安盟' },
        { value: 5.45, name: '乌兰察布市' },
        { value: 2.8, name: '包头市' },
        { value: 1.72, name: '呼和浩特市' },
        { value: 0.18, name: '乌海市' },
      ]
    }
  ]
}
bingChart.setOption(bingOption);
   </script>
   <script>
    //轮播图
    let img = document.querySelector(".slide img");
    let imgArr = ["nmglb1.jpg","nmglb2.jpg"];
    let count = 0;
    function cutImg(){
    img.src = "./img/"+imgArr[count];
//     for(let i = 0; i < iArr.length;i++){
//         iArr[i].className = "";
//     }
//     iArr[count].className = "active"; 
}

//设置定时切换
let timer = setInterval(function(){
    count++;
    if(count>imgArr.length-1){
        count = 0;
    }
    cutImg();
},2000)
   </script>
</body>
</html>